<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卷王工作区</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="./Semantic-UI-CSS-master/semantic.js" type="text/javascript"></script>
    <script src="./Semantic-UI-CSS-master/semantic.min.js"></script>

    <link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <link rel="stylesheet" href="./style.css">

</head>

<body>
    <div class="alertbody" style="width: 100%;height: 100%;  position: absolute;z-index: 9999; display: none;">
        <div class="imgvector" style="text-align: center; background-color: goldenrod ;opacity: 100% !important; width: 300px;margin-left: 550px; margin-top: 200px;">
            <img src="./images/pay.jpeg" alt="" style="opacity: 100% !important; width: 200px;">
            <div class="ui animated button margin-lr-small back" tabindex="0">
                <div class="visible content">返回</div>
                <div class="hidden content">
                    <i class="right arrow icon"></i>
                </div>
            </div>
        </div>
    </div>
    <nav class="ui inverted attached segment " style="border: none;">
        <div class="ui container ">
            <div class="ui inverted secondary menu stackable ">
                <img class="logo-size " src="./images/DOCX.png" alt="logo">
                <h1 class="ui inverted header" style="font-style: italic!important;margin: 0 10px !important;">卷王工作台
                </h1>
                <a href="./index.html" class="nav-item item "><i class="trash icon"></i>返回首页</a>
                <a href="#" class="nav-item item "><i class="info icon"></i>联系我们</a>
                <div class="right item ">
                    <div class="ui animated button margin-lr-small register" tabindex="0">
                        <div class="visible content">注册</div>
                        <div class="hidden content">
                            <i class="right arrow icon"></i>
                        </div>
                    </div>
                    <div class="ui animated button margin-lr-small login" tabindex="0">
                        <div class="visible content">登录</div>
                        <div class="hidden content">
                            <i class="right arrow icon"></i>
                        </div>
                    </div>
                    <div class="reminder" style="display: none !important;" >
                        <p class="loginword"></p>
                    </div>
                    <div class="ui animated button margin-lr-small toVIP" tabindex="0">
                        <div class="visible content">成为VIP</div>
                        <div class="hidden content">
                            <i class="right arrow icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="ui attached segment" style="background-color: #F8F8FF !important;">
        <div class="ui container margin-t-small">
            <form class="ui form">
                <h4 class="ui dividing header">试卷信息</h4>
                <div class="field">
                    <label> 试卷名称&学校&日期</label>
                    <div class="three fields">
                        <div class="field">
                            <input class="papername" type="text" name="papername" placeholder="试卷名称">
                        </div>
                        <div class="field">
                            <input class="schoolname" type="text" name="schoolname" placeholder="学校名称">
                        </div>
                        <div class="field">
                            <input class="date" type="text" name="date" placeholder="日期yyyy-mm-dd">
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>出题人信息</label>
                    <div class="two fields">
                        <div class=" field">
                            <input type="text" name="authname" placeholder="姓名">
                        </div>
                        <div class=" field">
                            <input type="text" name="authcode" placeholder="工号">
                        </div>
                    </div>
                </div>
                <h4 class="ui dividing header">题目信息</h4>
                <div class="four fields">
                    <div class="field">
                        <label>科目</label>
                        <select name="" id="course">
                            <option value="CHN">语文</option>
                            <option value="MATH">数学</option>
                            <option value="ENG">英语</option>
                            <option value="PHY">物理</option>
                            <option value="CHE">化学</option>
                            <option value="BIO">生物</option>
                            <option value="CS">计算机</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>年级</label>
                        <select name="" id="">
                            <option value="PRI">小学</option>
                            <option value="SEN">初中</option>
                            <option value="JUN">高中</option>
                            <option value="UNI">大学</option>
                            <option value="MAS">研究生</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>固定范围</label>
                        <select name="" id="">
                            <option value="PRI">一单元</option>
                            <option value="SEN">二单元</option>
                            <option value="JUN">三单元</option>
                            <option value="UNI">四单元</option>
                            <option value="MAS">五单元</option>
                        </select>
                    </div>
                    <div class="field">
                        <div class="two attached fields">
                            <div class="attached field">
                                <label>活动范围</label>
                                <div class="attached two fields">
                                    <div class="attached field">
                                        <input type="text" name="from" placeholder="起始页码">
                                    </div>
                                    <div class="attached field">
                                        <input type="text" name="to" placeholder="结束页码">
                                    </div>
                                </div>
                            </div>
                            <div class="attached field">
                                <label>全书</label>
                                <div class="ui toggle checkbox">
                                    <input type="checkbox" tabindex="0" class="hidden" name="all">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h4 class="ui dividing header">题目类型</h4>
                <div class="three fields">
                    <div class="field">
                        <h3>选择题：</h3>
                    </div>
                    <div class="field">
                        <label for="">数目</label>
                        <input type="text" name="choose" placeholder="数目">
                    </div>
                    <div class="field">
                        <label for="">难度</label>
                        <select name="" id="choosehard">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
                <div class="three fields">
                    <div class="field">
                        <h3>填空题：</h3>
                    </div>
                    <div class="field">
                        <label for="">数目</label>
                        <input type="text" name="choose" placeholder="数目">
                    </div>
                    <div class="field">
                        <label for="">难度</label>
                        <select name="" id="choosehard">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
            </form>
            <div class="ui attached segment opacity" style="border: none;">
                <div class="ui container">
                    <div class="butbar" style="text-align:right;">
                        <button class="ui primary button upload" onclick="singleFile.click()">
                            上传*
                            <form action="" style="display:none !important;">
                                <input type="file" id="singleFile" name="singleFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none  !important;;">
                            </form>
                          </button>
                          
                          <button class="ui button save">
                            保存
                          </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(()=>{
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'http://localhost:8080/iflogin');
            xhr.send();
            xhr.onload = function () {
                var status = xhr.responseText;
                console.log(status);
                if (status == '1' || status == '2') {
                    console.log('we did it');
                    $('.register').css('display','none');
                    $('.login').css('display','none');
                    $('.reminder').css('display','block');
                    if(status == '1'){
                        $('.loginword').text("尊敬的VIP用户，您已登陆");
                        $('.upload').attr('disabled',false);
                        $('.toVIP').css('display','none');
                    }
                    else{
                        $('.loginword').text("尊敬的用户，您已登陆");
                        $('.upload').attr('disabled',true);
                        $('.toVIP').css('display','block');
                    }
                }
                else {
                    $('.register').css('display','block');
                    $('.login').css('display','block');
                    $('.toVIP').css('display','none');
                    $('.reminder').css('display','none');
                    $('.upload').attr('disabled',true);
                }
            }
        })
        $('.login').click(()=>{
            window.location.href='http://localhost:8080/login.html'
        })
        $('.register').click(()=>{
            window.location.href='http://localhost:8080/register.html'
        })
        $('.ui.checkbox')
            .checkbox()
            ;
        $('#course').click(() => {
            console.log($(this).find("option:selected").val());
        })
        $('.ui.button.save').click(()=>{
            
            var xhr= new XMLHttpRequest();
            xhr.open('post','http://localhost:8080/paperinfo');
            xhr.setRequestHeader('Content-Type','application/json');
            var papername =$('.papername').val();
            var schoolname = $('.schoolname').val();
            var date = $('.date').val();
            alert(papername+'保存成功');
            xhr.send(JSON.stringify({
                papername:papername,
                schoolname:schoolname,
                date:date
            }));
            // setTimeout(()=>{
            //     window.open('http://localhost:8080/docs/'+papername+'.docx');
            // },4000)
            xhr.onload=function(){
                setTimeout(()=>{
                    var filepath = decodeURIComponent('http://localhost:8080/docs/'+papername+'.docx')
                    window.open(filepath);
                },4000)   
            }
            // setTimeout(()=>{
            //     var xhr = new XMLHttpRequest();
            //     var papername =$('.papername').val();
            //     var params = 'papername='+papername;
            //     xhr.open('get','http://localhost:8080/download?'+params);
            //     xhr.send();
            // },5000)
        })
        $('.upload').on('change',()=>{
            var file = $('#singleFile')[0].files;
            var fromData = new FormData();
            fromData.append('singleFile',file[0]);
            $.ajax({
                url:'http://localhost:8080/selfuploads',
                type:'post',
                processData:false,
                contentType:false,
                data:fromData,
                success: function(){
                    alert("上传成功！");
                }
            })
            alert("上传成功");
        })
        $('.toVIP').click(()=>{
            $('.alertbody').css('display','block');
        })
        $('.back').click(()=>{
            $('.alertbody').css('display','none');
        })
    </script>
</body>

</html>